<template>
  <div class="upload-image-wrap">
    <div v-if="useState.imageUrl" class="upload-image-mask">
      <span @click="useDelete"><CloseOutlined /></span>
    </div>
    <a-upload
      v-model:file-list="useState.fileList"
      name="avatar"
      :accept="initConfig.accept"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :customRequest="useCustomRequest"
      :before-upload="useBeforeUpload"
    >
      <img
        v-if="useState.imageUrl"
        :src="useState.imageUrl"
        alt="avatar"
        width="100%"
        height="100%"
        class="image-size"
      />
      <div v-else>
        <loading-outlined v-if="useState.loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text">{{ initConfig.buttonText }}</div>
      </div>
    </a-upload>
  </div>
  <Cropper ref="cropperRef" @ok="useConfirmCropper" v-bind="$attrs" />
</template>
  <script setup>
import { ref } from "vue";
import {
  LoadingOutlined,
  PlusOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
// hook
import { useIndex } from "./use-index";
// 裁切组件
import Cropper from "../cropper/cropper.vue";
// props
import uploadProps from "./props";
// 双向绑定
const modelValue = defineModel();
// 默认配置
const props = defineProps(uploadProps);
// 合并数据
const initConfig = { ...props.uploadConfig, ...props.config };
// CropperRef
const cropperRef = ref(null);
const { 
  useState, 
  useBeforeUpload, 
  useCustomRequest, 
  useConfirmCropper, 
  useDelete 
} = useIndex({ initConfig, cropperRef, modelValue }) // 传参的扩展性比较弱

</script>
<style lang="scss" scoped src="./style.scss"></style>